﻿(function ($, undefined) {
    var buttonTemplate = {
        id: '',
        type: 'button', // button | a
        href: '',
        classes: [],
        caption: '',
        isEnabled: true,
        enabled: null,
        onClick: function () { }
    };
    
    var optionsTemplate = {
        resetElement: true,
        left: [],
        right: []
    };

    // create a group of elements (buttons)
    var createGroup = function (container, allElements, area, elements) {
        var groupContainer = container.find('.commandBar-group.' + area);

        if (groupContainer.length == 0) {
            groupContainer = $('<div class="commandBar-group"></div>')
                .appendTo(container)
                .addClass(area);

            if (area && area == 'right') {
                groupContainer.css('float', 'right');
            } else {
                groupContainer.css('float', 'left');
            }
        } else {
            groupContainer.html('');
        }

        var mElements = elements;
        $.each(elements, function (i, element) {
            if (element instanceof jQuery) {
                element.appendTo(groupContainer);
                return true; // continue
            }

            if (!element.id || allElements[element.id] != null) return;
            var $element = $.extend({}, buttonTemplate, element);

            var el = $element.type == 'a' ? $('<a></a>') : $('<div></div>');

            el = el.appendTo(groupContainer)
                    .attr('id', $element.id)
                    .html('' + $element.caption);

            if ($element.type == 'a' && $element.href && $element.href !== '') {
                el.attr('href', $element.href);
            }

            if ($element.classes && $element.classes.length > 0) {
                $.each($element.classes, function (i, item) {
                    el.addClass(item);
                });
            }

            $element.enabled = function (isEnabled) {
                if (isEnabled) {
                    $element.isEnabled = isEnabled;
                }

                if ($element.isEnabled) {
                    el.addClass('nineseas-button')
                        .removeClass('nineseas-button-disabled')
                        .bind('click', $element.onClick);

                    if ($element.type == 'a' && $element.href && $element.href !== '') {
                        el.attr('href', $element.href);
                    }
                } else {
                    el.addClass('nineseas-button-disabled')
                        .removeClass('nineseas-button')
                        .unbind('click');
                    if ($element.type == 'a' && $element.href && $element.href !== '') {
                        el.attr('href', '');
                    }
                }
            };

            $element.enabled();
            $element.element = el;

            allElements[$element.id] = $element;
        });

        return groupContainer;
    };

    $.commandBar = function (selector, options) {
        var container = $(selector);

        if (container.length == 0) return;

        var mOptions = $.extend({}, optionsTemplate, options);

        var allElements = {};

        if (mOptions.resetElement) {
            container.find('.commandBar-group').remove();
        }

        if (mOptions.left && mOptions.left.length > 0) {
            createGroup(container, allElements, 'left', mOptions.left);
        }

        if (mOptions.right && mOptions.right.length > 0) {
            createGroup(container, allElements, 'right', mOptions.right);
        }
    }
})(jQuery);